<!--
 * @Author: lmk
 * @Date: 2021-11-11 15:32:38
 * @LastEditTime: 2021-11-22 21:00:41
 * @LastEditors: lmk
 * @Description: 
-->
<template>
	<view class="u-flex" @click="checked" :class="otherClass">
		<view class="left-radio" :class="{'active':name==value}"></view>
		<view class="u-flex-1" :class="'u-margin-left-'+marginLfet">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"itemRadio",
		props: {
			name: {
				type: [Number,String,Boolean],
				default: false
			},
			value: {
				type: [Number,String,Boolean],
				default: false
			},
			marginLfet:{
				type:Number,
				default:30
			},
			otherClass:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				activeName:false
			};
		},
		methods: {
			checked() {
				//this.activeName = this.name;
				this.$emit('input',this.name)
				this.$emit('change',this.name)
			}
		},
	}
</script>

<style lang="scss" scoped>
.left-radio{
	width: 36rpx;
	height: 36rpx;
	border-radius: 50%;
	border: 3rpx solid #808080;
	&.active{
		position: relative;
		&::after{
			content: '';
			position: absolute;
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			background-color: var(--theme-color);
		}
	}
}
</style>
